<style scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
}
.layout-menu {
  position: fixed;
  height: 90vh;
  background: #fff;
  left: 0;
  overflow: hidden;
}
.layout-content {
  height: 90vh;
  overflow-y: auto;
}
</style>
<template>
  <div class="layout">
    <Layout>
      <Sider class="layout-menu">
        <Menu active-name="1">
          <MenuItem name="search" to="/search">
            <Icon type="ios-search"/>搜索
          </MenuItem>
          <MenuGroup title="我的音乐">
            <MenuItem name="local">
              <Icon type="ios-musical-notes"/>本地音乐
            </MenuItem>
            <MenuItem name="download">
              <Icon type="md-download"/>下载管理
            </MenuItem>
            <MenuItem name="recent" to="/recent">
              <Icon type="md-time"/>最近播放
            </MenuItem>
          </MenuGroup>
          <MenuGroup title="歌单">
            <MenuItem name="favorite">
              <Icon type="md-heart"/>我喜欢的音乐
            </MenuItem>
          </MenuGroup>
        </Menu>
      </Sider>
      <Layout :style="{marginLeft: '200px'}">
        <Content class="layout-content">
          <router-view></router-view>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>
<script>
export default {};
</script>